################################
Connect React to a Lightning app
################################
**Audience:** Users who already have a react app and want to connect it to a Lightning app.

**pre-requisites:** Make sure you already have a react app you want to connect.

**Difficulty level:** intermediate.

----

************
Example code
************
To illustrate how to connect a React app and a lightning App, we'll be using the `example_app.py` file
which :doc:`lightning_app init react-ui <create_react_template>` created:

.. literalinclude:: ../../../../../src/lightning/app/cli/react-ui-template/example_app.py

and the App.tsx file also created by :doc:`lightning_app init react-ui <create_react_template>`:

.. literalinclude:: ../../../../../src/lightning/app/cli/react-ui-template/ui/src/App.tsx

----

*************************************
Connect the component to the react UI
*************************************
The first step is to connect the dist folder of the react app using `StaticWebFrontend`:

.. literalinclude:: ../../../../../src/lightning/app/cli/react-ui-template/example_app.py
    :emphasize-lines: 13

the dist folder must contain an index.html file which is generated by the compilating command `yarn build` which
we'll explore later.

----

**********************************
Connect component to the root flow
**********************************
Next, connect your component to the root flow. Display the react app on the tab of your choice
using `configure_layout`:

.. literalinclude:: ../../../../../src/lightning/app/cli/react-ui-template/example_app.py
    :emphasize-lines: 19, 27

----

*********************************
Connect React and Lightning state
*********************************
At this point, the React app will render in the Lightning app. Test it out!

.. code:: bash

    lightning_app run app example_app.py

However, to make powerful React+Lightning apps, you must also connect the Lightning App state to the react app.
These lines enable two-way communication between the react app and the Lightning app.

.. literalinclude:: ../../../../../src/lightning/app/cli/react-ui-template/ui/src/App.tsx
    :emphasize-lines: 10, 13

----

****************
Component vs App
****************
Notice that in this guide, we connected a single react app to a single component.

.. literalinclude:: ../../../../../src/lightning/app/cli/react-ui-template/example_app.py
    :emphasize-lines: 6-13

You can use this single react app for the FULL Lightning app, or you can specify a React app for EACH component.

.. code:: python
    :emphasize-lines: 5, 9, 18-20

    import lightning as L


    class ComponentA(L.LightningFlow):
        def configure_layout(self):
            return L.app.frontend.StaticWebFrontend(Path(__file__).parent / "react_app_1/dist")


    class ComponentB(L.LightningFlow):
        def configure_layout(self):
            return L.app.frontend.StaticWebFrontend(Path(__file__).parent / "react_app_2/dist")


    class HelloLitReact(L.LightningFlow):
        def __init__(self):
            super().__init__()
            self.react_app_1 = ComponentA()
            self.react_app_2 = ComponentB()

        def configure_layout(self):
            tab_1 = {"name": "App 1", "content": self.react_app_1}
            tab_2 = {"name": "App 2", "content": self.react_app_2}
            return tab_1, tab_2


    app = L.LightningApp(HelloLitReact())

This is a powerful idea that allows each Lightning component to have a self-contained web UI.
